<template>
  <div>
    <headNav></headNav>
    <CheckboxGroup v-model="result" ref="checkboxGroup">
      <ul class="list">
        <li class="clearfix border-bottom" v-for="(item,index) of list" :key="index">
          <span class="fr label">{{item.score}}</span>
          <Checkbox :name="item.id">
            <div class="imgBox">
              <VanImage
              round
              width="0.8rem"
              height="0.8rem"
              :src="item.imgUrl"
              />
            </div>
            <div class="name">{{item.name}}</div>
          </Checkbox>
        </li>
      </ul>
    </CheckboxGroup>
    <div class="confirmBtn">
        <Button type="info" block @click="handelDel">确定删除</Button>
    </div>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav';
import { CheckboxGroup, Checkbox, Button, Toast, Image as VanImage } from 'vant';
export default {
    name:'delCriticism',
    components:{
        headNav,
        CheckboxGroup,
        Checkbox,
        Button,
        Toast,
        VanImage
    },
    data(){
      return {
        list: [],
        result: []
      }
    },
    computed:{
      classItem(){
        return this.$store.state.studentAppraise.classItem
      }
    },
    methods:{
      handelDel(){
        const params = {
          ids:this.result
        }
        this.$store.dispatch('studentAppraise/DelReviewTypeList',params).then(res=>{
          this.result = [];
          this.getList();
          Toast.success('删除成功');
        })
      },
      getList(){
            const params = {
                leaveCode:2,
                isAll:false,
                classId:this.classItem.classId
            }
            let list = [];
            this.$store.dispatch('studentAppraise/GetStudentsReviewType',params).then(res=>{
              if(res.status == 200){
                list = res.data;
                list.forEach(item => {
                  if(item.type == 2){
                    this.list.push(item);
                  }
                });
              }
            })
        }
    },
    mounted(){
      this.getList()
    }
}
</script>

<style scoped>
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix:before,
.clearfix:after {
  content: ' ';
  display: table;
  clear: both;
}
.list{
  height:100%;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding-bottom:44px;
} 
.list li{
  padding:0.28rem;
  background-color:#fff;
}
.list li .label{
  color:#128FEF;
  font-size:0.26rem;
  display: inline-block;
  line-height:0.8rem;
}
.list li .imgBox{
  width:0.8rem;
  height:0.8rem;
  display: inline-block;
  vertical-align: middle;
}
.list li .imgBox img{
  width: 100%;
  height:100%;
}
.list li .name{
  display: inline-block;
  color:#000;
  line-height:0.8rem;
  vertical-align: middle;
  margin-left:0.36rem;
}
.confirmBtn{
  position: fixed;
  bottom:0;
  width:100%;
}
</style>
